<template>
<p>对表格进行排序，可快速查找或对比数据。</p>
<p>在列中设置 <code>sortable</code> 属性即可实现以该列为基准的排序， 接受一个 <code>Boolean</code>，默认为 <code>false</code>。 可以通过 Table 的 <code>default-sort</code> 属性设置默认的排序列和排序顺序。 可以使用 <code>sort-method</code> 或者 <code>sort-by</code> 使用自定义的排序规则。 如果需要后端排序，需将 <code>sortable</code> 设置为 <code>custom</code>，同时在 Table 上监听 <code>sort-change</code> 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 在本例中，我们还使用了 <code>formatter</code> 属性，它用于格式化指定列的值， 接受一个 <code>Function</code>，会传入两个参数：<code>row</code> 和 <code>column</code>， 可以根据自己的需求进行处理。</p>
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>